<template>
  <div class="search">
    <el-form
      label-position="right"
      label-width="80px"
      :model="searchForm"
      ref="searchFormRef"
      size="small"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="始发站" prop="startStation">
            <el-input
              placeholder="请输入始发站"
              v-model="searchForm.startStation"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="目的站" prop="endStation">
            <el-input
              placeholder="请输入目的站"
              v-model="searchForm.endStation"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="政策名称" prop="policyName">
            <el-input
              placeholder="请输入政策名称"
              v-model="searchForm.policyName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="政策号" prop="policyNo">
            <el-input
              placeholder="请输入政策号"
              v-model="searchForm.policyNo"
            />
          </el-form-item>
        </el-col>
        <search-btn
          ref="searchBtn"
          @handleSearch="handleSearch"
          @handleRest="handleRest"
        />
        <el-col :span="5">
          <el-form-item label="代理号" prop="agentCode">
            <el-select
              v-model="searchForm.agentCode"
              multiple
              collapse-tags
              clearable
              placeholder="请选择代理号"
            >
              <el-option
                v-for="{ name } in selectArr"
                :key="name"
                :label="name"
                :value="name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="searchForm.type">
              <el-radio :label="undefined">全部</el-radio>
              <el-radio :label="1">中转</el-radio>
              <el-radio :label="0">直达</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="table">
    <el-table
      :data="tableArr"
      stripe
      style="width: 100%"
      row-key="id"
      ref="dataTableRef"
      height="500"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="startStation" label="航段" width="120">
        <template #default="{ row }">{{
          row.startStation + '-' + row.endStation
        }}</template>
      </el-table-column>
      <el-table-column
        prop="carrier"
        label="承运人"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="goodsType"
        label="结算货物类型"
        width="110"
      ></el-table-column>
      <el-table-column prop="m" label="M" width="60"></el-table-column>
      <el-table-column prop="n" label="N" width="60"></el-table-column>
      <el-table-column prop="rate45" label="45+" width="60"></el-table-column>
      <el-table-column prop="rate100" label="100+" width="60"></el-table-column>
      <el-table-column prop="rate300" label="300+" width="70"></el-table-column>
      <el-table-column prop="rate500" label="500+" width="70"></el-table-column>
      <el-table-column
        prop="rate1000"
        label="1000+"
        width="70"
      ></el-table-column>
      <el-table-column
        prop="flightNo"
        label="航班号"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="aircraftType"
        label="机型"
        width="70"
      ></el-table-column>
      <el-table-column prop="type" label="类型" width="70">
        <template #default="{ row }">{{
          row.type === 0 ? '直达' : row === 1 ? '中转' : ''
        }}</template>
      </el-table-column>
      <el-table-column
        prop="transitCity"
        label="中转城市"
        width="80"
      ></el-table-column>
      <el-table-column prop="agentName" label="适用代理人" width="100">
        <template #default="{ row }">
          <el-link
            href="javascript:;"
            type="primary"
            @click="handleAlert(row.id)"
            >查看列表</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="startDate" label="生效期限" width="150">
        <template #default="{ row }">
          <div>开始：{{ row.startDate }}</div>
          <div>结束：{{ row.endDate }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">{{ status[row.status] }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="policyName"
        label="政策名称(政策号）"
        width="150"
      >
        <template #default="{ row }">
          <div>{{ row.policyName }}</div>
          <div>{{ row.policyNo }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <component
    :is="isComponent"
    :policyId="policyId"
    @handleClose="handleClose"
  />
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { ElForm, ElTable } from 'element-plus'
import SearchBtn from 'components/common/SearchBtn.vue'
import AgentList from '@/views/rariffMaintenance/Basics/components/alert/AgentList.vue'
import { $rariff } from '@/service/rariffMaintenance'
import { $select } from '@/service/common'
import { pagingConfig, status } from '@/assets/common'
import { freightDropCol } from '@/views/rariffMaintenance/Basics/components/config'
import { sortTable } from '@/utils/hooks/tableSort'
import { alertListAction } from '@/utils/hooks/alertList'
interface record {
  id: number
}

export default defineComponent({
  name: 'FreightManagement',
  components: {
    SearchBtn,
    AgentList
  },
  setup() {
    // region 初始化参数
    const searchForm = reactive({
      page: 1,
      size: 20,
      startStation: '',
      endStation: '',
      policyName: '',
      policyNo: '',
      type: '',
      agentCode: ''
    })
    const pagingConf = reactive({
      ...pagingConfig
    })
    // endregion

    // region 查询重置功能
    const searchBtn = ref<InstanceType<typeof SearchBtn>>()
    const searchFormRef = ref<InstanceType<typeof ElForm>>()
    const dataTableRef = ref<InstanceType<typeof ElTable>>()
    const tableArr = ref()
    const handleSearch = async () => {
      try {
        const { data } = await $rariff.search(searchForm)
        tableArr.value = data.records
        pagingConf.total = data.total
        pagingConf.pageSize = data.size
        pagingConf.currentPage = data.page
      } catch (e) {
        console.log(e)
      }
      searchBtn.value?.handleCloseLoading()
    }
    const handleRest = () => {
      searchFormRef.value?.resetFields()
      dataTableRef.value?.clearSelection()
      handleSearch()
    }
    // endregion

    // region 获取下拉框值
    const selectArr = ref()
    onMounted(async () => {
      const { data } = await $select.select()
      selectArr.value = data
    })
    // endregion

    // region分页
    const handleSizeChange = (val: number) => {
      searchForm.size = val
      handleSearch()
    }
    const handleCurrentChange = (val: number) => {
      searchForm.page = val
      handleSearch()
    }
    // endregion

    // region选中的数据
    const selectList = ref<number[]>([])
    const handleSelectionChange = (val: record[]) => {
      selectList.value = []
      val.forEach((item) => selectList.value.push(item.id))
    }
    const getSelectList = (): number[] => {
      return selectList.value
    }
    // endregion

    // region查看代理人列表
    const { isComponent, handleClose, handleAlert, policyId } =
      alertListAction('AgentList')
    // endregion

    // region 拖拽
    const dropColArr = ref(freightDropCol)
    sortTable(tableArr, dropColArr)
    // endregion
    return {
      searchForm,
      selectArr,
      tableArr,
      searchBtn,
      searchFormRef,
      isComponent,
      policyId,
      dataTableRef,
      status,
      handleSizeChange,
      handleCurrentChange,
      handleClose,
      ...toRefs(pagingConf),
      handleSearch,
      handleRest,
      handleAlert,
      handleSelectionChange,
      getSelectList
    }
  }
})
</script>

<style scoped lang="less">
/deep/.el-table,
/deep/.el-table__empty-block {
  height: calc(100vh - 300px) !important;
}
</style>
